<template>
	<view class="xm20-25">
		
		<view class="xflex-x-center xpt24">
			<image class="jz xmr20" src="/static/image/mine/sj.png" mode=""></image>
			<view class="jzw">
				盲盒酒店待支付
			</view>
		</view>

		<view class="times xmt32  xmb20">
			剩余支付时间：{{time}}秒
		</view>
		<view class="order xp24-32 xbs ">

			<view class="">

				<view class="xmt20">
					<view class="time">
						{{info.data.orderinfo.time}}<span class="xml32">{{info.data.orderinfo.night}}晚</span>
					</view>
					
					<view class="xflex-x xmt10">
						<view class="">
							<view class="inforoomItem xflex1" >
								{{info.data.orderinfo.adult}}成人  {{info.data.orderinfo.children}}儿童
							</view>
						</view>
						<view class="inforoomItem xflex1">
							间数:{{info.data.orderinfo.night}}
						</view>
					</view>
					<view class="inforoom">
						
						
						<view class="inforoomItem" v-for="(itm,indx) in info.data.orderinfo.spec" :key="indx">
							{{itm.name}}:{{itm.value}}
						</view>
					</view>
					
					
					

				</view>

				<view class="roomBox">
					<view class="room " v-for="(item,index) in info.data.houses">
						<view class="xflex-x-between xmb24">
							<view class="roomTitle">
								{{item.house_name}}
							</view>
							<view class="">
						<!-- 		<view class="roomdeltal" @click="topage('/pages/mine/detail/detail?id='+item.id)">
									房型详情
								</view>
								 -->
								<!-- <view class="roomdeltalbtn">
									取消订单
								</view> -->
							</view>
						</view>
						<view class="xflex-x">
							
							
							
							<view class="roomspan" v-for="(itm,indx) in item.labels" :key="indx">
								{{itm}}
							</view>
							
							
							
							

						</view>
					</view>



				</view>
				<view class="roomtips">
					酒店要求在12:00后办理入住，请留意行程安排。{{info.data.start}}18:00前可免费取消 
				</view>


			</view>


		</view>


		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x">
				<view class="tipsa">

				</view>
				<view class="titles">
					入住信息
				</view>
			</view>
			<view class="form">
				<view class="form-item xflex-x ">
					<view class="form-lab">
						姓名
					</view>

					<input type="text" v-model="info.realname" placeholder-class="color1" class="form-ipt" placeholder="请填写入住姓名" />
				</view>

				<view class="form-item xflex-x ">
					<view class="form-lab">
						联系电话
					</view>
					<view class="xflex-x">
						<view class="qy xmr20">
							+86
						</view>
						<input v-model="info.mobile" placeholder-class="color1" type="number" maxlength="11" class="form-ipt" placeholder="请填写联系电话" />
					</view>
				</view>

				<view class="form-item xflex-x " @click="info.show = true">
					<view class="form-lab">
						预计到店
					</view>
					<view class="xflex-x-between xflex1">

						<text class="form-ipt xflex1" :class="info.expect_time?'':'color1'">{{info.expect_time?$u.timeFormat(info.expect_time,'yyyy-mm-dd hh:MM'):'请选择时间'}}</text>

						<image class="xia" src="/static/image/mine/xia1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x">
				<view class="tipsa">

				</view>
				<view class="titles">
					盲盒酒店
				</view>
			</view>
			<view class="hote">
				<view class="hote-item xflex-x xpt24 xpb24">
					<view class="hote-imgs pr xmr12">

						<image class="hote-img pa " :src="info.data.hotel.image" mode=""></image>


					</view>
					<view class="xflex1 hote-Boss xai">

						<view class="">
							<view class="hote-title">
								{{info.data.hotel.name}}
							</view>
							<view class="xmt12">
								<image v-for="(item,index) in info.data.hotel.star" :key="index" class="xing" src="/static/image/mine/xing.png" mode=""></image>
								<!-- <u-rate :count="4" active-color="#F89D25" v-model="value"></u-rate> -->
							</view>

							<view class="xflex-x xmt12">
								<view class="hote-span xmr10">
									{{info.data.hotel.score}}
								</view>


							</view>

						</view>

						<view class="xflex-x-between xmt24">
							<view class="xflex-x">
								<image class="hote-address" src="../../..//static/image/mine/address.png" mode="">
								</image>
								<view class="hote-breakfast clamp">
									{{info.data.hotel.distance}}
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="yhq xmt20">
			<view class="xflex-x-between xmb60">
				<view class="xflex-x">
					<view class="yhq-title">
						优惠券
					</view>

				</view>

				<view class="xflex-x">
					<view class="yhq-price">
						-￥{{info.data.coupon_money}}
					</view>
					<image class="yhq-icon" src="/pagesA/static/images/gengduo1.png" mode=""></image>
				</view>

			</view>
			<view class="xflex-x-between">
				<view class="xflex-x">
					<view class="yhq-title">
						骊金豆立减
					</view>
					<view class="yhq-vip">
						VIP专享
					</view>
				</view>

				<view class="xflex-x">
					<view class="yhq-price">
						-￥{{info.data.bean_money}}
					</view>
					<image class="yhq-icon" src="/pagesA/static/images/gengduo1.png" mode=""></image>
				</view>

			</view>
		</view>

		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x xmb40">
				<view class="lab">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.sn}}
					</view>
					<view class="copy xml10" @click="copy(info.data.sn)">
						复制
					</view>
				</view>
			</view>

			<view class="xflex-x xmb40">
				<view class="lab">
					下单时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.createtime}}
					</view>

				</view>
			</view>

			<view class="xflex-x">
				<view class="lab">
					盲盒时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.blindtime}}
					</view>

				</view>
			</view>


		</view>

		<view class="" style="height: 300rpx;">

		</view>


		<view class="xbottom xflex-x-between bom">
			<view class="xflex-x bom">
				<view class="sf">
					实付款：
				</view>
				<view class="price">
					<text>￥</text>
					{{info.data.order_amount}}
				</view>
				<view class="pricehx">
					￥{{info.data.total_amount}}
				</view>
			</view>
			<view class="btn" @click="sub()">
				立即支付
			</view>
		</view>

		<u-datetime-picker :show="info.show" :minDate="info.min" v-model="info.expect_time" mode="datetime" @cancel="info.show = false"
			@confirm="ontinme"></u-datetime-picker>
	</view>
</template>

<script setup>
	import {
		pay
	} from '@/network/home.js'
	import {
		defineProps,
		defineEmits,
		watchEffect,
		ref,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {formatDate} from "/utils/common.js"
	let info = reactive({
		id: '',
		data: '',
		realname: '',
		mobile: '',
		expect_time: '',
		show: false,
		min:Number(new Date())
	})
	const topage =(url) =>{
		uni.navigateTo({
			url:url
		})
	}
	onLoad((option) => {
		info.id = option.id
		getinfo()
	})
	let time = ref(0)
	const timerId = ref(null);
	const getinfo = () => {
		pay({
			id: info.id,
			action: 'info'
		}).then(res => {
			console.log(res);
			info.data = res.data
			clearInterval(timerId.value);
			timerId.value = null;
			time.value = info.data.seconds
			startTimers()
		})
	}
	
	
	const startTimers = () => {
		// 假设我们每秒钟更新一次数据  
		timerId.value = setInterval(() => {
			// 在这里执行你的代码  
			if(time.value < 0){
				clearInterval(timerId.value);
			}
			time.value = time.value - 1
		}, 1000);
	};
	
	
	
	// 在组件挂载时启动定时器
	onMounted(()=>{
		clearInterval(timerId.value);
		startTimers()
	});
	
	// 在组件卸载时清除定时器  
	onUnmounted(startTimers);

	const ontinme = (time) => {
		// console.log(time.toString().substring(0, 10), info);
		info.expect_time = time
		info.show = false
	}
	
	const copy = (data) =>{
		uni.setClipboardData({
			data:data,
			success() {
				uni.showToast({
					icon:"none",
					title:'复制成功'
				})
			}
		})
	}
	
	const sub = () =>{
		
		
		if(!uni.$u.test.mobile(info.mobile))	{
			uni.showToast({
				icon:"none",
				title:"手机号格式错误"
			})
			return
		}
		let data = {
			id:info.id,
			action:'buy',
			realname:info.realname,
			mobile:info.mobile,
			expect_time:uni.$u.timeFormat(info.expect_time,'yyyy-mm-dd hh:MM')
		}
		
		
		
		pay(data).then(res => {
			info.data = res.data
				uni.requestPayment({
					appId:res.data.appId,
					timeStamp: res.data.timeStamp,     // 字符串，时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间(String)  
					  nonceStr: res.data.nonceStr,     // 字符串，随机串(String)  
					  package: res.data.package,      // 字符串，统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***（String）  
					  'signType': 'MD5',   // 字符串，签名方式：MD5/HMAC-SHA256，与统一下单接口一致（String）  
					  'paySign': res.data.paySign,    
					success: function(res) {
						uni.redirectTo({
							url:'/pages/mine/order/myOrder?type=3'
						})
						
					},
					fail: function(err) {
						console.log('支付失败', err);
					}
				});
		
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}
	.color1 {
		color: #cacaca;
	}
	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.top {
		padding-bottom: 27rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}

	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}

	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}

	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;

	}

	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}

	.star {

		// background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}

	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.lab {
		font-weight: bold;
		font-size: 24rpx;
		color: #7C7C7C;
		width: 160rpx;
	}
	.fanhui {
		width: 60rpx;
		height: 60rpx;
	}

	.value {
		font-weight: bold;
		font-size: 24rpx;
		color: #272727;
	}

	.copy {
		font-weight: bold;
		font-size: 22rpx;
		color: #333333;
		width: 70rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.jz {
		width: 36rpx;
		height: 36rpx;
	}

	.jzw {
		font-weight: bold;
		font-size: 40rpx;
		color: #198FFF;
	}

	.hote {

		&-Boss {
			height: 200rpx;
			white-space: normal;
		}

		&-title {
			// width: 157rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
		}

		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #198EFF;
		}

		&-imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		&-time {
			width: 180rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			bottom: 8rpx;
			left: 10rpx;
		}

		&-span {
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			background: #EEEEEE;
			border-radius: 6rpx;
			padding: 7rpx 13rpx;
		}

		&-breakfast {
			
			width: 300rpx;

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 48rpx;
		}

		&-address {
			width: 28rpx;
			height: 28rpx;
		}

		&-ads {

			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}
	}


	.tipsa {
		width: 6rpx;
		height: 32rpx;
		margin-right: 6rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
	}

	.titles {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}

	.times {
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #198FFF;

	}

	.form {
		&-lab {
			width: 130rpx;
			height: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			line-height: 26rpx;
			margin-right: 26rpx;
		}

		&-ipt {
			font-weight: 500;
			font-size: 28rpx;
			
		}

		&-item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}

	.qy {
		font-weight: 500;
		font-size: 28rpx;
		color: #7F7F7F;
	}

	.xia {
		width: 24rpx;
		height: 24rpx;
	}

	.roomBox {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.room {
		width: 650rpx;
		// height: 116rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		&:last-child {
			margin-bottom: 0;
		}


	}

	.roomTitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.roomdeltal {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		
	}
	
	.inforoom {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.inforoomItem {
		// width: 50%;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.roomspan {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		padding: 0 20rpx;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 8rpx;
			display: block;
			width: 1rpx;
			height: 20rpx;
			background-color: #999;
		}

		&:first-child {
			padding-left: 0;
			
		}
		

		&:last-child {
			border-right: none;
			&::after {
				width: 0;
				display: none;
			}
		}


	}

	.roomtips {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-top: 27rpx;

	}

	.yhq {
		width: 690rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 52rpx 41rpx 54rpx 30rpx;
		box-sizing: border-box;

		&-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
			margin-right: 18rpx;
		}

		&-vip {
			width: 90rpx;
			height: 28rpx;
			border-radius: 3rpx;
			border: 1px solid #DD5C4A;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #DD5C4A;
			line-height: 28rpx;
			text-align: center;
		}

		&-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}

		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #F2260C;
		}
	}

	.bom {
		align-items: flex-end;
	}

	.btn {
		width: 214rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 36rpx;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}

	.sf {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
	}

	.price {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 44rpx;
		color: #F3371E;

		&>text {
			font-size: 32rpx;
		}
	}

	.pricehx {
		text-decoration: line-through;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
	
	.xing {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
</style>